<template>
	<!-- 家政加盟 -->
	<view class="housekeep">
		<view class="addRecover-main">
			<!-- 回收员姓名 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle serveName">家政服务名称：</text>
				<input type="text" v-model="recyclerInfo.name" placeholder="请输入" />
			</view>
			<!-- 性别选择 -->
			<view class="sexChoice">
				<view class="sexChoice-title">性别：</view>
				<view class="choiceInfo man">
					<view class="redio" @tap="sexChoice(1)">
						<image v-if="recyclerInfo.sex==1"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>男</view>
				</view>
				<view class="choiceInfo">
					<view class="redio" @tap="sexChoice(2)">
						<image v-if="recyclerInfo.sex==2"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>女</view>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle">手机号：</text>
				<input type="tel" v-model="recyclerInfo.telphone" placeholder="请输入" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">验证码</view>
				<view class="getset">
					<input class="siteRightCode" type="text" placeholder="请输入验证码" v-model="personCode" />
					<view class="code" v-if="!isWaitingForCode" @tap="getCode">获取验证码</view>
					<view class="code" v-else>{{ countdown }}秒后重新获取</view>
				</view>
			</view>
			<view class="addRecoverMain-content">
				<text class="contentTitle genro">家政服务分类：</text>
				<!-- <multiselect-dropdown :options="dropdownOptions" :test="test" /> -->
				<!-- <MultiselectDropdown :options="dropdownOptions"></MultiselectDropdown> -->
				<uni-section style="width: 100%;" title="基础多选(可通过collapse-tags-num设置超过数量省略)" type="line">
					<view class="selectDropdown">
						<MultiselectDropdown v-model="value1" collapse-tags :collapse-tags-num="3" multiple
							dataKey="label" dataValue="value" :localdata="data" @change="change"></MultiselectDropdown>
					</view>
				</uni-section>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">地址:</view>
				<picker mode="region" @columnchange="sildeChange" @change="onDateChange" :range="array"
					class="multiPicker">
					<view class="getset">
						<view v-if="recyclerInfo.province==''" class="getSite-title siteRight">选择省市区/县</view>
						<view v-else>{{recyclerInfo.province}} {{recyclerInfo.city}} {{recyclerInfo.county}}</view>
						<view class="icon iconfont icon-xiangyoujiantou"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="addButton" @tap="pushRecover">一键加盟</view>
	</view>
</template>

<script>
	import util from '../../component/commen/api/util';
	import MultiselectDropdown from "@/component/MultiselectDropdown .vue"
	export default {
		components:{MultiselectDropdown},
		data() {
			return {
				recyclerInfo: { //家政服务信息
					name: "",
					sex: 1,
					telphone: "", //手机号
					money: 0.00,
					province: "", //省
					city: "", //市
					county: "", //区
					cate_id: [], //回收员类型id
				},
				value1: [],
				data: [],//分类
			};
		},
		watch: {
			value1(newval) {
				console.log('newval',newval);
				this.recyclerInfo.cate_id = newval
				// this.recyclerInfo.cate_id = newval.join(",")
			}
		},
		onShow() {
			this.getGenro()
		},
		methods:{
			getGenro(){//获取家政分类信息
				var params = {
					do:"reserve",
					op:"cateList",
					partnerid:0
				}
				util.requestWithSign(params).then(res=>{
					console.log("获取分类信息",res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.housekeep {
		padding: 20rpx;
		box-sizing: border-box;
		.addRecover-main {
			background: #fff;
			border-radius: 20rpx;
		
			// padding: 20rpx;
			// box-sizing: border-box;
			.addRecoverMain-content {
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
		
				.contentTitle {
					// width: 25%;
					margin-right: 20rpx;
				}
				.genro{
					width: 45%;
					// border: 1px solid #f00;
				}
				.serveName{
					width: 33%;
				}
			}
		
			.sexChoice {
				padding: 30rpx 20rpx;
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;
		
				.sexChoice-title {
					margin-right: 20rpx;
				}
		
				.choiceInfo {
					display: flex;
					align-items: center;
		
					.redio {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #f0f0f0;
						margin-right: 10rpx;
		
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
		
				.man {
					margin-right: 80rpx;
				}
		
			}
		
			.siteAddOrModify-info {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
		
				.title {
					margin-right: 20rpx;
				}
				.getset {
					display: flex;
					align-items: center;
						// border: 1px solid #000;
					.getSite-title {
						color: #666666;
					}
					.code {
						font-size: 26rpx;
						// width: 170rpx;
						text-align: center;
						color: #808080;
						padding: 5rpx 10rpx;
						background: #f6f6f6;
						
					}	
					.icon-xiangyoujiantou {
						margin-left: auto;
					}
				}
				.multiPicker {
		
					// border: 1px solid #f00;
					
				}
			}
		}
		
		.addButton {
			width: 100%;
			padding: 30rpx 0;
			margin-top: 60rpx;
			box-sizing: border-box;
			text-align: center;
			background: #00b388;
			color: #fff;
			border-radius: 30rpx;
		}
	}
</style>